//切片上传文件到华为OBS
$(document).ready(function () {
    var sectionUpload = $('.section_upload');
    if (sectionUpload) {
        // 点击上传按钮触发文件选择并自动上传
        window.startUploadButtonClick = function() {
            $('#fileInput').click();
            var fileInput = $(this).closest('.input-group').find('.fileInput');
            if (fileInput.length > 0) {
                fileInput.click();
            }
        }

        $('.startUploadButton').on('click', function () {
            $('#fileInput').click();
        });

        // 当选择文件后自动开始上传
        $('#fileInput').on('change', function () {
            // 阻止表单的默认提交行为
            event.preventDefault();

            // 获取选定的文件
            let file = $('#fileInput')[0].files[0];
            // 获取文件名
            let file_name = file.name;
            let partSize = 1 * 1024 * 1024; // 分段大小，这里设置为MB

            //获取分片上传初始化信息
            // 调用函数并处理返回结果
            var init_data = getUploadConfig(file_name);
            if (!init_data) {
                layer.alert('初始化错误', {icon: 5});
                return false
            }

            //加载层-风格4
            layer.msg('正在处理中,文件越大等待时间越长...', {
                icon: 16
                , shade: 0.4
                , time: 0
            });

            var path = init_data.path//文件合并后在obs上的保存路径
            var fileId = init_data.upload_id//切片上传的

            // 数据切片
            var chunks = fileSlice(file, partSize);

            // 发送分割数据段
            uploadPart(file_name, fileId, chunks, path, 0, []);

        });

        //获取分段上传配置信息
        function getUploadConfig(file_name) {
            var res_data;
            $.ajax({
                url: 'upload_file/initiateMultipartUpload',
                type: "post",
                data: {
                    'file_name': file_name
                },
                async: false,
                success: function (res) {
                    // console.log(res, res.data)
                    if (res.code) {
                        res_data = res.data
                    }
                }
            });
            return res_data;
        }

        //数据切片
        function fileSlice(file, chunkSize = 1024 * 1024 * 0.2) {
            // 1.初始化数据
            var totalSize = file.size;
            var start = 0;
            var end = start + chunkSize;
            var chunks = [];
            // 2.使用bolb提供的slice方法切片
            while (start < totalSize) {
                var chunk = file.slice(start, end);
                chunks.push(chunk);
                start = end;
                end += chunkSize;
            }
            // 3.返回切片组chunk[]
            return chunks;
        }

        //执行逐个上传
        function uploadPart(file_name, upload_id, chunks, path, index = 0, parts = []) {
            if (index >= chunks.length) {
                // 所有部分上传完成
                makeFileIntegration(file_name, upload_id, chunks.length, parts, path);
                return;
            }

            var chunk = chunks[index];
            var formData = new FormData();
            formData.append('upload_id', upload_id);
            formData.append('chunk', chunk);
            formData.append('path', path);

            let part_number = index + 1
            formData.append('part_number', part_number);

            $.ajax({
                type: "POST",
                url: 'upload_file/uploadPart',
                data: formData,
                contentType: false,
                processData: false,
                success: function (done) {
                    if (done.code) {
                        parts.push(done.data);
                        // console.log(done, ' 已完成');
                        uploadPart(file_name, upload_id, chunks, path, part_number, parts); // 递归调用上传下一个部分
                    }
                }
            });
        }

        //通知整合方法
        function makeFileIntegration(file_name, upload_id, size, parts, path) {
            // 通知已传输完成
            $.ajax({
                url: 'upload_file/completeMultipartUpload',
                type: "post",
                data: {
                    'file_name': file_name,
                    'upload_id': upload_id,
                    'parts': parts,
                    'path': path,
                },
                async: false,
                success: function (res) {
                    // console.log(res)
                    if (res.code) {
                        // console.log(res.data)
                        //将结果写入input，并渲染列表元素
                        wrInput(res.data.url,res.data.fullurl,res.data.filename)
                        //console.log('最终结果',$('#fileInput_data').val())
                        layer.closeAll('loading'); //关闭加载层
                        layer.msg('上传成功', {icon: 1});
                    }else{
                        layer.msg('上传失败', {icon: 5});
                    }
                }
            });
        }

        // 把上传成功的相对url入input,并添加渲染列表元素
        function wrInput(url,fullurl,filename){

            //获取文件后缀
            var imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp"];

// 获取 URL 中的文件扩展名
            var fileExtension = fullurl.substring(fullurl.lastIndexOf("."));

            // 判断文件扩展名是否为图片格式
            if (imageExtensions.includes(fileExtension.toLowerCase())) {
                //console.log("这个 URL 是指向图片文件的URL");
            } else {
                fullurl = '/assets/img/wenjian.png';
            }

            //把相对路径写入表单input
            let input_value = $('#fileInput_data').val();
            if (!input_value){
                var input_arr = [];
            }else{
                var input_arr = input_value.trim().split(',');
            }

            input_arr.push(url);
            input_value = input_arr.join(',');
            $('#fileInput_data').val(input_value);

            var id_names = 'specific_li_' + (input_arr.length - 1);

            //把绝对路径渲染到模板
            var html = `
                <li class="col-xs-3 specific_li_class" id="${id_names}">
                    <!--展示按钮-->
                    <span class="show-filename" style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${filename}">${filename}</span>
                    <a href="javascript:;"  class="thumbnail">
                        <img src="${fullurl}" class="img-responsive">
                    </a>
                    <!--删除按钮-->
                    <a href="javascript:;" class="fileInput_del btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
                </li>
            `;
            // 使用 jQuery 将 html 追加到指定 id 的 ul 元素中
            $('#fileInput_img').append(html);
        }

        //点击删除对应的文件
        // 使用事件委托监听 fileInput_del 元素的点击事件，并删除对应的 li 元素
        $('#fileInput_img').on('click', '.fileInput_del', function() {
            var index = $(this).closest('li').index();  // 获取当前 li 元素在 ul 中的索引

            //把相对路径写入表单input
            let input_value = $('#fileInput_data').val();
            if (!input_value){
                var input_arr = [];
            }else{
                var input_arr = input_value.trim().split(',');
            }

            // 删除 input_arr 中对应索引的元素
            if (index >= 0 && index < input_arr.length) {
                input_arr.splice(index, 1);
                $('#fileInput_data').val(input_arr);
                console.log("删除后的 input_arr 数组：" + input_arr);
            } else {
                console.log("索引超出范围，无法删除对应元素");
            }

            $(this).closest('li').remove();  // 找到最近的 li 元素并删除
            // 在这里还可以添加其他处理逻辑，比如从相应的 input 中移除对应的值等
        });


        // 鼠标移入时显示完整文件名
        $('#fileInput_img').on('mouseenter', '.specific_li_class', function() {
            var filename = $(this).find('.show-filename').text().trim();
            var index = $(this).closest('li').index();  // 获取当前 li 元素在 ul 中的索引
            let class_name = "#specific_li_" + index
            console.log(index,class_name)
            //tips层-左
            layer.tips(filename, class_name, {
                tips: [4, '#0FA6D8']
            });
        });


        //获取input数据
        $('#getInputData').on('click', function (){
            let input_value = $('#fileInput_data').val();
            var input_arr = input_value.split(',');
            console.log(input_arr);
        });

    }
});


